<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
	<title></title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		
		ul {
			list-style: none;
		}
		
		img {
			vertical-align: top;
		}
		/*取消图片底部3像素距离*/
		
		.box {
			width: 300px;
			height: 200px;
			margin: 100px auto;
			background-color: pink;
			position: relative;
			overflow: hidden;
		}
		
		.box ul li {
			float: left;
		}
		
		.box ul {
			width: 1500px;
			position: absolute;
			left: 0;
			top: 0;
		}
	</style>
</head>

<body>
	<div class="box" id="screen">
		<ul>
			<li><img src="./images/01.jpg" alt="" /></li>
			<li><img src="./images/02.jpg" alt="" /></li>
			<li><img src="./images/03.jpg" alt="" /></li>
			<li><img src="./images/04.jpg" alt="" /></li>
			<li><img src="./images/01.jpg" alt="" /></li>
		</ul>
	</div>
	<script>
			//获取DOM对象
			var screen = document.getElementById("screen");
			var ul = screen.children[0];
			var timer = null;

			timer = setInterval(play, 8);

			//鼠标经过box 清理定时器
			screen.onmouseover = function() {
				clearInterval(timer);
			}
			screen.onmouseout = function() {
				timer = setInterval(play, 8);
			}

			function play() {
				//leader = leader + step
				var leader = ul.offsetLeft;
				var step = -2;
				if(leader > -1200) {
					leader = leader + step;
					ul.style.left = leader + "px";
				} else {
					ul.style.left = 0;
				}
			}
		</script>
</body>

</html>